<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Dressing Buttons: Customizing the YUI Buttons - Examples</title>
<meta name='author' content='Caridy Patino (caridy at gmail.com)' />
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href='http://yui.yahooapis.com/2.2.2/build/reset-fonts-grids/reset-fonts-grids.css'/>
<style>
button {
    padding: 0;margin: 0;
    border: 0;border-collapse:collapse;border-spacing:0;
    font-size:inherit;font-size:100%;font-weight:normal;
    /* 99% for safari; 100% is too large */ 
    font:99% arial,helvetica,clean,sans-serif;
}
</style>
<link rel="stylesheet" type="text/css" href="../assets/example.css">
<!-- YUI Basement Style -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/button/assets/button.css">
<style>
/* ===================================================== */
/* Orange button                                         */
/* ===================================================== */
.yuibutton.orange {
    background-color: #ff9900;
}
.yuibutton.orange button,
.yuibutton.orange a {
    border-color: #F26104;
	color: #333333;
}
.yuibutton.orange, .yuibutton.orange .first-child {
    border-color:#FAB965;
}
/* Focus & Hover state */
.yuibutton.orange.focus, 
.yuibutton.orange.hover {
    background-color:#333333;
}
.yuibutton.orange.focus, 
.yuibutton.orange.focus .first-child,
.yuibutton.orange.hover, 
.yuibutton.orange.hover .first-child {
    border-color:#F6981C;
}
.yuibutton.orange.focus button, 
.yuibutton.orange.focus a,
.yuibutton.orange.hover button, 
.yuibutton.orange.hover a {
    border-color:#F26104;
    color: #ffffff;
}
/* Active state */
.yuibutton.orange.active, 
.yuibutton.orange.active .first-child {
    border-color:#98a09f;
}
.yuibutton.orange.active button, 
.yuibutton.orange.active a {
    border-color:#7a8180;
}
/* Checked state */
.yuibutton.orange.radio.checked,
.yuibutton.orange.checkbox.checked,
.yuibutton.orange.radio.checked .first-child,
.yuibutton.orange.checkbox.checked .first-child {
    border-color:#7a8180;
}
.yuibutton.orange.radio.checked button,
.yuibutton.orange.checkbox.checked button { 
    border-color:#98a09f;
}
/* Disabled state */
.yuibutton.orange.disabled, 
.yuibutton.orange.disabled .first-child {
    border-color:#cbcdc5;
}
.yuibutton.orange.disabled button, 
.yuibutton.orange.disabled a {
    color:#b9b9b9;
}


/* ===================================================== */
/* Transparent button                                    */
/* ===================================================== */
.yuibutton.transparent {
}
.yuibutton.transparent button,
.yuibutton.transparent a {
    border-color: transparent;
}
.yuibutton.transparent, .yuibutton.transparent .first-child {
    border-color:transparent;
}
/* Focus & Hover state */
.yuibutton.transparent.focus, 
.yuibutton.transparent.hover {
}
.yuibutton.transparent.focus, 
.yuibutton.transparent.focus .first-child,
.yuibutton.transparent.hover, 
.yuibutton.transparent.hover .first-child {
    border-color:transparent;
}
.yuibutton.transparent.focus button, 
.yuibutton.transparent.focus a,
.yuibutton.transparent.hover button, 
.yuibutton.transparent.hover a {
    border-color:transparent;
}
/* Active state */
.yuibutton.transparent.active, 
.yuibutton.transparent.active .first-child {
    border-color:transparent;
}
.yuibutton.transparent.active button, 
.yuibutton.transparent.active a {
    border-color:transparent;
}
/* Checked state */
.yuibutton.transparent.radio.checked,
.yuibutton.transparent.checkbox.checked,
.yuibutton.transparent.radio.checked .first-child,
.yuibutton.transparent.checkbox.checked .first-child {
    border-color:transparent;
}
.yuibutton.transparent.radio.checked button,
.yuibutton.transparent.checkbox.checked button { 
    border-color:transparent;
}

/* Disabled state */
.yuibutton.transparent.disabled, 
.yuibutton.transparent.disabled .first-child {
    border-color:transparent;
}
.yuibutton.transparent.disabled button, 
.yuibutton.transparent.disabled a {
}

</style>
<!-- Dependency source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/button/button-beta-min.js"></script>
<script type="text/javascript">

    // this method is not important, his only function is the creation of the YUI buttons and the adition of the correct className to every button...
	YAHOO.example.init = function () {
		// "contentready" event handler for the "pushbuttonsfrommarkup" <fieldset>
		YAHOO.util.Event.onDOMReady(function () {
			// Create Buttons using the YUI Button markup
			var oPushButton1 = new YAHOO.widget.Button("pushbutton1");
			var oPushButton2 = new YAHOO.widget.Button("pushbutton2");
			var oPushButton3 = new YAHOO.widget.Button("pushbutton3");
			//var oPushButton4 = new YAHOO.widget.Button("pushbutton4");
			//var oPushButton5 = new YAHOO.widget.Button("pushbutton5");
			var oPushButton6 = new YAHOO.widget.Button("pushbutton6");
		});
	}();

</script>
</head>
<body id="cms-body">
<div id="doc">
	
	<div class="path">
	  <a href="http://bubbling.comarq.com/" target="_top">Bubbling Library</a> &gt; <a href="http://bubbling.comarq.com/eng/examples" target="_top">Examples</a>
	</div>
	
	<h1>Dressing Buttons: Customizing the YUI Buttons</h1>
	<p>There're two different markups for the YUI buttons:</p>
	<pre>&lt;span id=&quot;pushbutton2&quot; class=&quot;yuibutton&quot;&gt;&lt;span class=&quot;first-child&quot;&gt;&lt;a href=&quot;#&quot;&gt;Button Label&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span id=&quot;pushbutton3&quot; class=&quot;yuibutton&quot;&gt;&lt;span class=&quot;first-child&quot;&gt;&lt;button type=&quot;button&quot; name=&quot;button3&quot;&gt;Button Label&lt;/button&gt;&lt;/span&gt;&lt;/span&gt;</pre>
	<p>The different between these markups, is that the first code (anchor) can be a push button only, while the second code (button) can be any type of button (menu button, split button, push button, radio button, checkbox, etc).</p>
	<p>The first problem with the YUI Buttons is with the button's tag, this tag is not included in the reset/font CSS, which means that each browser will apply a different parameters during the render process for this tag. To mitigate this problem uses this code:</p>
	<p>NOTE: I hope the yui guys include this code in the next release...</p>
	<pre>&lt;style&gt;<br>button {<br>    padding: 0;margin: 0;<br>    border: 0;border-collapse:collapse;border-spacing:0;<br>    font-size:inherit;font-size:100%;font-weight:normal;<br>    /* 99% for safari; 100% is too large */ <br>    font:99% arial,helvetica,clean,sans-serif;<br>}<br>&lt;/style&gt;</pre>
	<p>This code must be included right after the reset/font definition. </p>
	<p>The second problem is related with the IE and the button tag, this browser will include a thin white border (interior border) to the button tag. I can't find the solution yet, I'm working on it... ;-) If you have any idea, let me know! A partial solution is to avoid the use of the button tag, instead uses anchor for push buttons (see the differences in IE between the button 2 and the button 3 in the examples).</p>
	<fieldset>
	<legend>From Markup</legend>
	<span id="pushbutton1" class="yuibutton orange"><span class="first-child">
	<button type="button" name="button1">Orange Button</button></span></span>
  </fieldset>
	<fieldset>
		<legend>From Markup: Href</legend>
		<span id="pushbutton2" class="yuibutton transparent"><span class="first-child"><a href="#">Transparent Button</a></span></span>
	</fieldset>
	<fieldset>
		<legend>From Markup: Button</legend>
		<span id="pushbutton3" class="yuibutton transparent"><span class="first-child"><button type="button" name="button3">Transparent Button</button></span></span>
	</fieldset>
	<fieldset>
		<legend>From Markup</legend>
		<span id="pushbutton6" class="yuibutton"><span class="first-child"><button type="button" name="button6">Default Button</button></span></span>
	</fieldset>

</div>



</body>
</html>